<template>
	<div class="body">
		<div class="title">所有书籍</div>
		<div v-for="item of books" >
			<ul>
				<router-link :to="{path:'/chapter',query:{id:item.b_id}}">
					<li class="content border">
						<span class="bk_type border-right">[{{item.b_type}}]</span>
						<span class="bk_title border-right">{{item.b_title}}</span>
						<span class="bk_author border-right">{{item.b_author}}</span>
						<span class="bk_num">{{item.b_num}}</span>
					</li>
				</router-link>
			</ul>
		</div>
	</div>
</template>

<script>
import axios from 'axios'

export default{
	name:'BookType',
	data(){
		return{
			books:[],
			booktitle:''
		}
	},
	methods:{
		getbooksinfo(){
			// console.log(title);
			axios.post(('http://localhost:3000/api/user/searchBookInfo'),{
				
			},{}).then((response)=>{
				// console.log(response.data)
				var d = []
				for(var i = 0;i < response.data.length;i++){
					var dat = JSON.stringify(response.data[i])
					var dat2 = JSON.parse(dat)
					d.push(dat2)
				}
				var c= this.books = d
				// console.log(c)
			})
		}
	},
	mounted(){
		this.getbooksinfo();
	}
}
</script>

<style scoped="scoped">
span{
  display: inline-block;
  color: #000000;
}
.title{
	width: 100%;
	padding-top: 60px;
	padding-bottom: 20px;
	font-size: 25px;
	font-weight: 600;
	text-align: center;
}
.content{
	margin-left: 18%;
	margin-right: 18%;
	width: 65%;
	height: 30px;
	line-height: 30px;
	font-size: 16px;
	float: left;
}
.content:hover{
	cursor: pointer;
	background: #CACACA;
}
.bk_type {
	width: 100px;
	text-align: center;
	color: darkgray;
}
.bk_title{
	width: 400px;
	text-align: center;
}
.bk_author{
	width: 150px;
	padding-left: 40px;
}
.bk_num{
	width: 100px;
}
</style>
